<template>
	<view class="meal_index">
		<xbd-pages-content title="配送下单">
		<template #content>
			<view class="content" :style="'minHeight:'+windowHeight+'px'">
				<view class="banner" >
					<image src="../../static/images/deliveryorder/psxd_bg.png" mode=""></image>
				</view>
				<view class="body">
					<view class="box" @click="ordinary">
						<view class="icon">
							<image src="../../static/images/deliveryorder/snps.png" mode=""></image>
						</view>
						<text>室内配送</text>
					</view>
					<view class="box box_marg" @click="addOutSide">
						<view class="icon">
							<image src="../../static/images/deliveryorder/outside.png" mode=""></image>
						</view>
						<text>室外配送</text>
					</view>
				</view>
				<view class="bottom">
					<xbd-apply-card :cardIcon="require('../../static/images/deliveryorder/down.png')"  :cardBg="require('.../../static/images/meal/blue.png')"  cardTag="室内下单记录" @clickApplyCard="insideList()" ></xbd-apply-card>
					<xbd-apply-card :cardIcon="require('../../static/images/car/carMy.svg')"  :cardBg="require('.../../static/images/meal/purple.png')"  cardTag="室外下单记录" @clickApplyCard="outsideList()" ></xbd-apply-card>
				</view>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				windowHeight:0
			};
		},
		methods: {
			ordinary() {
				uni.navigateTo({
					url:'./indoordistribution'
				})
			},
			insideList() {
				uni.navigateTo({
					url:'./myindent'
				})
			},

			addOutSide() {
				uni.navigateTo({
					url:'./addOutside/addOutside',
				})
			},
			
			outsideList(){
				uni.navigateTo({
					url:'./addOutside/outSideList',
				})
			},
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(){
			uni.getSystemInfo({
			    success:(res) =>{
				 this.windowHeight = res.windowHeight
			    }
			});
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
.banner{
	height: 140px;
	image{
		height: 140px;
		width: 100%;
	}
}
.body{
	display: flex;
	justify-content: space-evenly;
	background-color: #FFFFFF;
	box-sizing: border-box;
	margin: 5px 0;
	padding: 15px 50rpx;
	.box_marg{
		// margin: 0 130rpx;
	}
	.box{
		width: 140rpx;
		text-align: center;
		font-size: 32rpx;
		.icon{
			margin:0 auto;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		text{
			color: #999999;
		}
	}
}
.bottom{
	flex: 1;
	background-color: #FFFFFF;
	padding: 30px 50rpx 0 50rpx;
}
</style>
